import { observer } from 'mobx-react'
import { useState, useEffect } from 'react'
import { Form, Input, Checkbox, Switch, Button, message } from 'antd'
import { useNavigate, useLocation } from 'react-router-dom'
// import './addAppVersion.less'

const { TextArea } = Input

const AddIN: React.FC = () => {
  const [form] = Form.useForm()
  const navigate = useNavigate()
  const location = useLocation()
  const [loading, setLoading] = useState(false)

  const onFinish = async (values: any) => {
    try {
      setLoading(true)
      console.log('提交的值:', values)
      // TODO: 调用添加接口
      message.success('添加成功')
      navigate('/setting/internationalMg')
    } catch (error) {
      message.error('添加失败')
    } finally {
      setLoading(false)
    }
  }
  useEffect(() => {
    const { record } = location.state || {}  // 解构出传递的 record 数据
    if (record) {
        form.setFieldsValue(record)  // 设置表单的初始值
    }
  }, [location.state, form])
  return (
    <div className="add-app-detail">
      <div className="basic-info">
        <div className="title">基本信息</div>
        <Form
          form={form}
          onFinish={onFinish}
          initialValues={{
            forceUpdate: false,
            updateDisplay: false
          }}
        >
          <Form.Item
            label="名称Key"
            name="keyName"
            rules={[{ required: true, message: '请输入名称Key' }]}
          >
            <Input placeholder="请输入名称Key" />
          </Form.Item>
          <Form.Item
            label="状态"
            name="status"
            rules={[{ required: true, message: '请设置状态' }]}
          >
            <Switch />
          </Form.Item>

        </Form>
      </div>
      <div className="basic-info">
        <div className="title">多语言</div>
        <Form
          form={form}
          onFinish={onFinish}
          initialValues={{
            forceUpdate: false,
            updateDisplay: false
          }}
        >
          <Form.Item
            label="中文"
            name="cn"
            rules={[{ required: true, message: '请输入中文' }]}
          >
            <Input placeholder="请输入中文" />
          </Form.Item>

          <Form.Item
            label="英文"
            name="en"
            rules={[{ required: true, message: '请输入英文' }]}
          >
            <Input placeholder="请输入英文" />
          </Form.Item>
          <div className="form-actions">
            <Button type="primary" htmlType="submit" loading={loading}>
              保存
            </Button>
            <Button onClick={() => navigate(-1)}>
              返回
            </Button>
          </div>
        </Form>
      </div>
    </div>
  )
}

export default observer(AddIN)